<template>
  <div>
    <div class="content">
        <NavBar>
        <template #title>商品详情页</template>
      </NavBar>
      <div class="goodimg">
        <van-swipe class="myswipe">
          <van-swipe-item v-for="(item, index) in swipimg" :key="index">
            <img :src="item.external_url" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="good">
        <div class="detail">
          <div class="detail-price">
            <h5><i>￥</i> {{ detail.line_price_max }}</h5>
            <span>已售{{ detail.goods_sales }}件</span>
          </div>
          <div class="detial-title">
            {{ detail.goods_name }}
          </div>
        </div>
        <div class="guarantee">
          <div class="">
            <van-icon name="passed" color="red"/>
            七天无理由退货
            <van-icon name="passed" color="red"/>
            48小时发货
          </div>
          <van-icon @click="showmymodal" name="arrow" color="rgb(134, 129, 129)"/>
        </div>
        <div class="comment">
          <div class="comment-count">
            商品评价（{{ totalcomment }}条）
          </div>
          <div class="commont-more" @click="showcomment=true">
            查看更多
            <van-icon name="arrow" color="rgb(134, 129, 129)"/>
          </div>
        </div>
      </div>
      <div class="goodsaction">
        <van-goods-action>
          <van-goods-action-icon @click="$router.push('/home')" icon="wap-home-o" text="首页" dot/>
          <van-goods-action-icon @click="$router.push('/shopcart')" icon="cart-o" text="购物车" :badge="carttotal" />
          <van-goods-action-button @click="addcart" type="warning" text="加入购物车" />
          <van-goods-action-button @click="buynow" type="danger" text="立即购买" />
        </van-goods-action>
      </div>
      //弹窗
      <van-action-sheet v-model="showPannel" :title="mode === 'cart' ? '加入购物车' : '立刻购买'">
        <div class="product">
          <div class="product-title">
            <div class="left">
              <img :src="detail.goods_image" alt="">
            </div>
            <div class="right">
              <div class="price">
                <span>¥</span>
                <span class="nowprice">{{ detail.line_price_max }}</span>
              </div>
              <div class="count">
                <span>库存</span>
                <span>{{ detail.stock_total }}</span>
              </div>
            </div>
          </div>
          <div class="num-box">
            <span>数量</span>
            <CountBox v-model="count"></CountBox>
          </div>
          <div class="showbtn" v-if="detail.stock_total > 0">
            <div class="btn" @click="addgoods(detail.goods_id,count)" v-if="isaddcart">加入购物车</div>
            <div class="btn now" @click="buygoods(detail.goods_id,count,detail.skuList[0].goods_sku_id)" v-else>立刻购买</div>
          </div>
          <div class="btn-none" v-else>该商品已抢完</div>
        </div>
      </van-action-sheet>
    </div>
    <div class="mask" v-if="showmodal">
      <div class="mask-content" :class="{'mask-content-active':showmodal}">
        <van-nav-bar title="服务说明">
          <template #right>
            <van-icon @click="showmodal=false" name="cross" color="gray"/>
          </template>
        </van-nav-bar>
        <ul>
          <li class="serve" v-for="(item) in good_serve" :key="item.service_id"><van-icon name="circle" size="10px"/>{{ item.name }}
            <div class="summary">{{ item.summary }}</div>
          </li>
        </ul>
      </div>
    </div>

      <van-action-sheet v-model="showcomment" title="标题" :style="{height:600+'px'}" class="comment-content">
        <div class="action" v-for="item in allcomment" :key="item.comment_id">
          <div class="head-img">
            <img src="@/assets/banner1.jpg" alt="">
            <span :data-id="item.user.user_id">{{ item.user.nick_name }}</span>
          </div>
          <div class="user-comment">
            {{ item.content }}
          </div>
          <div class="comment-date">
            <span>得分：{{ item.score }}</span>
            <span>{{ item.create_time }}</span>
          </div>
        </div>

      </van-action-sheet>

  </div>
</template>

<script>
import { addToCart } from '@/api/cart'
import { Dialog, Toast } from 'vant'
import { getinfo } from '@/utils/storage'
import CountBox from '@/components/CountBox.vue'
import { getProDetail, getServeDetail, getGoodCommentTotal, getGoodComment } from '@/api/prodetail'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'ProductDetailIndex',
  components: {
    CountBox
  },
  async created () {
    const result = await getProDetail(this.$route.query.id)
    console.log(result)
    // console.log(this.$route.query.id)
    this.detail = result.data.detail
    this.swipimg = result.data.detail.goods_images

    const serve = await getServeDetail(this.$route.query.id)
    console.log(serve)
    this.good_serve = serve.data.list
    // console.log(this.good_serve)

    const total = await getGoodCommentTotal(this.$route.query.id)
    this.totalcomment = total.data.total.all

    const comment = await getGoodComment(this.$route.query.id, total.data.total.all)
    this.allcomment = comment.data.list

    this.cartTotal = this.carttotal
  },
  data () {
    return {
      detail: {},
      swipimg: [],
      showmodal: false,
      good_serve: [],
      showcomment: false,
      allcomment: [],
      totalcomment: 0,
      showsheet: false,
      showPannel: false,
      mode: '',
      count: 1,
      isaddcart: true,
      cartTotal: 0
    }
  },
  methods: {
    showmymodal () {
      this.showmodal = true
    },
    addcart () {
      this.showPannel = true
      this.mode = 'cart'
      this.isaddcart = true
    },
    buynow () {
      this.showPannel = true
      this.mode = 'buy'
      this.isaddcart = false
    },
    async addgoods (id, count) {
      if (!getinfo()) {
        Dialog.confirm({
          title: '温馨提示',
          message: '您还没有登录，请登录后重试',
          confirmButtonText: '去登录',
          cancelButtonText: '再逛逛'
        })
          .then(() => {
            // on confirm
            this.$router.replace({
              path: '/login',
              query: {
                redirect: this.$route.fullPath
              }
            })
          })
          .catch(() => {
            // on cancel
          })
      } else {
        // 添加到购物车的api
        const result = await addToCart(id, count, '0')
        console.log(result)
        Toast.success('成功添加至购物车')
        this.showPannel = false
        this.cartTotal = result.data.cartTotal
      }
    },
    buygoods (id, count, skuid) {
      this.$router.push({
        path: '/pay',
        query: {
          mode: 'buyNow',
          goodsId: id,
          goodsSkuId: skuid,
          goodsNum: count
        }
      })
    },
    ...mapActions('cart', ['getresult'])
  },
  computed: {
    ...mapState('cart', ['carttotal'])
  }
}
</script>

<style scoped lang="less">
.myswipe{
  height: 450px;
  background-color: white;
}
.myswipe img{
  width: 100%;
  height: 400px;
}
::v-deep(.van-swipe__indicator){
  background-color: rgb(134, 129, 129);
}
.detail{
  background-color: rgb(247, 247, 247);

  padding: 10px 5px;
}
.detail-price{
  background-color: white;
  display: flex;
  padding: 10px 0px;
  justify-content: space-between;
  align-content: center;
}
.detail-price h5{
  font-weight: 400;
  font-size: 20px;
  color: red;
}
.detail-price i{
  font-style: normal;
  font-size: 14px;
}
.detail-price span{
  font-size: 12px;
  color: rgb(183, 187, 190);
}
.detial-title{
  background-color: white;
  font-size: 16px;
}
.guarantee{
  display: flex;
  justify-content: space-between;
padding: 5px;
font-size: 16px;
}
.comment{
  display: flex;
  justify-content: space-between;
padding: 20px 5px;
font-size: 16px;
}
.commont-more{
  color: rgb(134, 129, 129);
}
.mask , .commentdetail{
 position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 100; /* 确保遮罩层在内容上方 */
  /* display: none;  */
}
.mask-content{

  width: 0;
  height: 0;
  background-color: white;
  overflow: hidden;
  transition: all 3s;
}
.mask-content-active{
    position: absolute;
  bottom: 0;
  width: 100%;
  height: 60%;
  max-width: 600px;
  max-height: 400px;
  /* border-radius: 8px; */
  /* padding: 20px; */

}
ul li{
  padding: 15px 5px 0 5px;
  font-size: 16px;
}
ul .serve{
  color: greenyellow;
}
ul .summary{
  padding-left: 1em;
  font-size: 15px;
  color: gainsboro;
}
.comment-content{
  background-color: gainsboro;
  overflow: hidden;
}
.head-img img{
  display: inline-block;
  width: 30px;height: 30px;
  border-radius: 15px;
  margin-right: 10px;
}
.action{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  margin-bottom: 10px;
  font-size: 16px;
  padding: 5px;
}
.head-img span{
  vertical-align:top;
}
.comment-date{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.product {
  .product-title {
    display: flex;
    .left {
      img {
        width: 90px;
        height: 90px;
      }
      margin: 10px;
    }
    .right {
      flex: 1;
      padding: 10px;
      .price {
        font-size: 14px;
        color: #fe560a;
        .nowprice {
          font-size: 24px;
          margin: 0 5px;
        }
      }
    }
  }

  .num-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }

  .btn, .btn-none {
    height: 40px;
    line-height: 40px;
    margin: 20px;
    border-radius: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(255, 148, 2);
  }
  .btn.now {
    background-color: #fe5630;
  }
  .btn-none {
    background-color: #cccccc;
  }
}
</style>
